<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<script src="../js/jquery-1.9.1.min.js"></script>
		<style type="text/css">
			
			@media screen and (max-width:2000px) {
				#main{
					width:50vw;height:60vh;margin-left:2vw
				}
			}
			@media screen and (max-width:1680px) {
				#main{
					width:45vw;height:57vh;margin-left:2.3vw;
				}	
			}
			@media screen and (max-width:1600px) {
				div ul li p{
					font-size: 8px;
					margin-left:15vw;
				}
				div ul li p:last-child{
					margin-left:15vw;
					font-size: 18px;
				}
			}
			@media screen and (max-width:1440px) {
				#main{
					width:100vw;height:55vh;
					margin-left:-90px;
				}		
			}
			@media screen and (max-width:1400px) {
				#main{
					width:80vw;height:50vh;
					margin-left:-40px;
				}
				div ul li p{
					font-size: 8px;
					margin-left:15vw;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				div ul li p:last-child{
					margin-left:15vw;
					font-size: 16px;
				}
			}	
			@media screen and (max-width:1366px) {
				div #main{
					width:30vw;height:60vh;margin-left:5vw
				}
				div ul li{
					width:43vw;
				}
				div ul li p{
					font-size: 8px;
					margin-left:16vw;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				div ul li p:last-child{
					margin-left:16vw;
					font-size: 14px;
				}		
			}
			@media screen and (max-width:1360px) {
				div ul li{
					width:44vw;
				}
				div ul li p{
					font-size: 8px;
					margin-left:16vw;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				div ul li p:last-child{
					margin-left:16vw;
					font-size: 12px;
				}
							
			}
			*{
				margin:0;padding:0;
			
			}
			div .customer{
				width:100vw;
				height:9.9vh;
				line-height: 9.9vh;
				color:#fff;
				font-size:12px;
				margin-left:8vw;
				font-family:'微软雅黑';
			}
			div ul{
				width:100vw;
				height:23vh;
				/* border:1px solid #ccc; */
				margin-top:10.5vh;
				display: flex;
			}
			div ul li{
				width:41vw;
				height:23vh;
				/* border:1px solid #ccc; */
				margin-left:4.3vw;
				background: url(../img/组5.png)no-repeat;
				background-size: 100% 100% ;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			div ul li:first-child{
				background: url(../img/组4.png)no-repeat;
				background-size: 100% 100% ;
			}
			div ul li p{
				width:41vw;
				margin-left:16vw;
				font-size: 14px;
				color: #0763c6;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			div ul li p:last-child{
				width:41vw;
				margin-left:16vw;
				color: #fff;
				font-size: 28px;
				 font-family: DIGI;
			}
			div #main{
				width:50vw;height:60vh;margin-left:2vw
			}
		</style>
	</head>
	<body>
		<div>
			<!-- <p class="customer">新老顾客统计</p> -->
			<p class="customer">Clients</p>
			<ul>
				<li>
					<p>Group company</p>
					<p class="orgnum"></p>
				</li>
				<li>
					<p>Branch</p>
					<p class="shopnum"></p>
				</li>
			</ul>
			<div id="main"></div>
		</div>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
		<script type="text/javascript">
		// 饼状图插件的部分内容
	 	var chart = echarts.init(document.getElementById('main'));
		  var optionbar = {
				color:['#df6c33','#018dfe'],//饼状图每部分的颜色
				tooltip: {
					trigger: 'item',
					// formatter: "{a} <br/>{b}: {c} ({d}%)",
					formatter: "{d}%",
					show:true,
				},
				series: [{
					type: 'pie',
					radius: ['35%', '50%'],
					center: ['40%', '50%'],
					avoidLabelOverlap: true,
					label: {
						normal: {
							formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比
						},
						emphasis: {
							show: true,
							textStyle: {
								fontSize: '8',
								// fontWeight: 'bold'
							}
						}
					},
					labelLine: {
						normal: {
							show: true
						}
					},
					// data: [50,96]
					data:[]
				}],	
			};
			chart.setOption(optionbar)
			var app = {
     currentIndex: -1
 };

 setInterval(function () {
     var dataLen = optionbar.series[0].data.length;
     // 取消之前高亮的图形
     chart.dispatchAction({
         type: 'downplay',
         seriesIndex: 0,
         dataIndex: app.currentIndex
     });
     app.currentIndex = (app.currentIndex + 1) % dataLen;
     // 高亮当前图形
     chart.dispatchAction({
         type: 'highlight',
         seriesIndex: 0,
         dataIndex: app.currentIndex
     });
     // 显示 tooltip
     chart.dispatchAction({
         type: 'showTip',
         seriesIndex: 0,
         dataIndex: app.currentIndex
     });
 }, 3000);

 $(function () {
	//初始化数据
	initData();
	setInterval(initData, 10000);

});
var dom = document.getElementById("main");
var gb = {
	chart: echarts.init(dom)
};
function disposeAndRun() {
	if (gb.chart) {
		gb.chart.dispose();
	}
	gb.chart = null;
	run(true);
}
var run = function (df) {
	if (!gb.chart) {
		gb.chart = echarts.init(dom);
	}
	if (optionbar && typeof optionbar === 'object') {
		gb.chart.setOption(optionbar, true);
	}
}
function initData() {
    $.ajax({
	    type : "get",
	    async : true, //同步执行
		url :"http://192.168.1.27:8080/MetisManage/dataAuth/findMemberOldAndNew",
			success: function (rrdata) {
				var data = rrdata.records[0];
				var seriesdata = [{
						'value': data.newMemPercent,
						'name':  '新顾客'
					},
					{
						'value': data.oldMemPercent,
						'name': '老顾客'
					}
				];
				optionbar.series[0].data=seriesdata;
				disposeAndRun();
			}
	});
			
	$.ajax({
		url:'http://192.168.1.27:8080/MetisManage/dataAuth/findOrgAndShopNum',
		type:'get',
		success:function(res){
			var data=res.records[0]
			$('.orgnum').html(data.orgnum)
			$('.shopnum').html(data.shopnum)
		}
	})
	
}	
   //设置默认选中高亮部分
// 	  chart.dispatchAction({
// 		  type: 'highlight',
// 		 name: '新顾客'
// 	  });
//       chart.on('mouseover', function (params) {
//           if(params.name!='新顾客'){
//               chart.dispatchAction({
//                   type: 'downplay',
//                   name: '新顾客',
//               })
//           }
//       });
//   
//       chart.on('mouseout', function (params) {
//               chart.dispatchAction({
//                   type: 'highlight',
//                name: '新顾客',
//               })
//       });
 	   


		   
		   
		   
		   
		   
// 	var myChart = echarts.init(document.getElementById('main'));
// 
// option = {
//     tooltip: {
//         trigger: 'item',
//         formatter: "{a} <br/>{b}: {c} ({d}%)"
//     },
//     series: [
//         {
//             // name:'访问来源',
//             type:'pie',
//             radius: ['35%', '50%'],
//             avoidLabelOverlap: false,
//             label: {
//                 normal: {
//                     show: false,
//                     position: 'center'
//                 },
//                 emphasis: {
//                     show: false,
//                     textStyle: {
//                         fontSize: '10',
//                         // fontWeight: 'bold'
//                     }
//                 }
//             },
//             labelLine: {
//                 normal: {
//                     show: false
//                 }
//             },
//             data:[
//                 {value:96, name:'直接访问'},
//                 {value:50, name:'搜索引擎'}
//             ]
//         }
//     ]
// };
// myChart.setOption(option)
//  setTimeout(function () {
//         myChart.dispatchAction({
//             type: 'highlight',
//            name: '搜索引擎'
//         });
//     });
// 
//     myChart.on('mouseover', function (params) {
//         if(params.name!='搜索引擎'){
//             myChart.dispatchAction({
//                 type: 'downplay',
//                 name: '搜索引擎',
//             })
//         }
//     });
// 
//     myChart.on('mouseout', function (params) {
//             myChart.dispatchAction({
//                 type: 'highlight',
//              name: '搜索引擎',
//             })
//     });

		</script>
	</body>
</html>
